<template>

	<el-icon
			v-if="_name && _name.indexOf('el-icon-') === 0"
			:style="{
				fontSize: _size,
				color: _color
			}"
			class="icon el-icon">
		<component :is="_name"/>
	</el-icon>

	<cus-svg
			v-else-if="_name && _name.indexOf('local-') === 0 || isExternal(_name)"
			:color="_color"
			:name="_name"
			:size="_size"/>

	<i
			v-else-if="_name"
			:class="[_name, 'icon']"
			:style="{
				fontSize: _size,
				color: _color
			}"/>

</template>

<script lang="ts" setup>
import {isExternal} from '@/utils/commonUtil'
import CusSvg from '@/components/cus-svg.vue'
import {computed} from 'vue'
import type * as CSS from 'csstype'

interface Props {
	name: string
	size?: CSS.Property.FontSize<string | number>
	color?: CSS.Property.Color
}

const props = withDefaults(defineProps<Props>(), {
	size: 'var(--el-font-size-medium)',
	color: 'currentColor'
})

const _name = computed<string>(() => props.name)
const _size = computed<string>(() => Number.isSafeInteger(Number(props.size)) ? `${props.size}px` : String(props.size))
const _color = computed<CSS.Property.Color>(() => props.color)

</script>
